<template>
  <div class="goodsinfocontainer">
    <transition 
   @before-enter='beforeEnter'
      @enter="enter"
      @after-enter='afterEnter'
    >
    <div class="ball" v-show="flag" ref='ball'></div>
    </transition>
    <!-- 轮播图区域 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <div class="loop">
            <mt-swipe :auto="4000">
              <mt-swipe-item v-for="item in lunbotuList" :key="item.id">
                <img :src="item.img_url" />
              </mt-swipe-item>
            </mt-swipe>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品购买区域 -->
    <div class="mui-card">
      <div class="mui-card-header">商品名称</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="price">
            市场价:
            <del>￥1999</del>&nbsp;&nbsp;销售价:
            <span class="now_price">￥999</span>
          </p>
          <p>
            购买数量:
            <number  @getCount = 'getSelectCount'></number>
          </p>
          <p>
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small" @click='addToShopcar'>加入购物车</mt-button>
          </p>
        </div>
      </div>
      <div class="mui-card-footer">
        <div class="mui-card">
          <div class="mui-card-content">
            <div class="mui-card-content-inner">
              <p>商品货号：</p>
              <p>库存情况:</p>
              <p>上架时间:</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品信息区域 -->
  </div>
</template>
<script>
import number from "./GoodsNumber.vue";

export default {
  data() {
    return {
      id: this.$route.params.id,
      lunbotuList: [],
      flag:false,
      selectedCount:1
    };
  },
  created() {
    this.getLoop();
  },
  methods: {
    getLoop() {
      this.$http
        .get("http://yapi.shangyuninfo.com/mock/121/api/goodsinfo")
        .then(result => {
          console.log(result);
          this.lunbotuList = result.body.message;
          //   console.log(this.lunbotuList);
          //   console.log(this.id)
        })
        .catch();
    },
    addToShopcar(){
        this.flag = !this.flag;
    },
    beforeEnter(el){
        el.style.transform = "translate(0,0)";
    },
    enter(el,done){
        el.offsetWidth;  //不添加的话没有动画
        // 小球动画优化思路
        // 1. 先分析导致动画不准确的本质原因： 我们把小球最终需要移动到的位置，已经局限到了某一分辨率下的 滚动条未滚动的情况下
        // 2. 只要分辨率和测试的时候不一致，或者滚动条有一定的滚动距离的之后，问题就出现了，
        // 3. 因此，我们经过分析得到结论，不能把位移的横纵坐标之间写为固定值，而是应该根据不同情况动态计算坐标值
        // 4. 经过分析，得出解决思路：先得到徽标的横纵坐标，再得到小球的横纵坐标，然后让y值求差，x值求差，得到的结果就是横纵坐标要位移的距离
        // 5. 如何获取徽标和小球的位置（横纵坐标）     domObject.getBoundingClientRect()  可以获取某一个元素距离页面最顶部以及最左边的距离

        // 获取小球再页面中的位置
         const ballPosition = this.$refs.ball.getBoundingClientRect();
        //  获取徽标在页面种的位置   分析：由于vue是不建议操作DOM  但是用父子传值比较麻烦，这里可以用id的方式获取页面中的任何元素，所以可以在子页面中通过id的方式获取页面中的所有的元素，不用区分父子组件。
         const badgePositon = document.getElementById('badge').getBoundingClientRect();

        const  xDist =badgePositon.left - ballPosition.left;
        const  yDist = badgePositon.top -ballPosition.top; 
        // console.log(xDist,yDist)

         el.style.transform = `translate(${xDist}px,${yDist}px)`;
         el.style.transition = 'all 0.5s cubic-bezier(.17,.67,.83,.67) '
         done();
    },
    afterEnter(el){
      this.ballFlag = !this.ballFlag;
    },
    getSelectCount(count){
      this.selectedCount=count;
      console.log('父组件拿到的值:'+this.selectedCount)
    }
  },
  components: {
    number
  }
};
</script>
<style scoped>
.goodsinfocontainer {
  padding-top: 40px;
}
.loop {
  height: 200px;
}
.loop img {
  width: 100%;
  height: 100%;
}
.mui-card {
  width: 100%;
}

.ball{
      width: 15px;
      height: 15px;
      background: red;
      border-radius: 50%;
      position: absolute;
      z-index: 99;
      top: 390px;
      left:138px;
      /* // transform: translate(100px,230px); */
    }
</style>